<template>
  <div class="home">
    <!-- Hero Section -->
    <section class="hero-section">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">专业的IT服务解决方案</h1>
          <p class="hero-subtitle">从设备维护到软件开发，我们提供一站式专业技术服务</p>
          
          <div class="hero-actions">
            <el-button type="primary" size="large" round @click="scrollToServices">
              <el-icon><Opportunity /></el-icon>
              查看服务
            </el-button>
            <el-button type="success" size="large" round @click="navigateToSoftware">
              <el-icon><Download /></el-icon>
              软件下载
            </el-button>
          </div>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section class="services-section" id="services">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">我们的专业服务</h2>
          <p class="section-subtitle">提供全方位的IT解决方案，助力您的业务发展</p>
        </div>
        
        <div class="services-grid">
          <div class="service-card" v-for="service in services" :key="service.id">
            <div class="service-icon">
              <el-icon :size="48" :color="service.color">
                <component :is="service.icon" />
              </el-icon>
            </div>
            <h3 class="service-title">{{ service.title }}</h3>
            <p class="service-description">{{ service.description }}</p>
            <el-button type="primary" plain round @click="navigateToService(service.path)">
              了解更多
            </el-button>
          </div>
        </div>
      </div>
    </section>

    <!-- Software Preview Section -->
    <section class="software-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">热门软件下载</h2>
          <p class="section-subtitle">安全可靠的软件资源，一键快速下载</p>
        </div>
        
        <div class="software-list">
          <el-skeleton :loading="loading" animated :count="3">
            <template #template>
              <el-skeleton-item variant="image" style="width: 100%; height: 180px; border-radius: 8px;" />
              <div style="padding: 14px;">
                <el-skeleton-item variant="h3" style="width: 80%; margin-bottom: 10px;" />
                <el-skeleton-item variant="text" style="width: 60%;" />
                <div style="display: flex; margin-top: 16px;">
                  <el-skeleton-item variant="button" style="width: 50%; margin-right: 8px;" />
                  <el-skeleton-item variant="button" style="width: 50%;" />
                </div>
              </div>
            </template>
          </el-skeleton>
          
          <div v-if="!loading" class="software-grid">
            <software-card 
              v-for="software in popularSoftware" 
              :key="software.id" 
              :software="software"
              @click="navigateToSoftwareDetail(software.id)"
            />
          </div>
          
          <div class="view-all">
            <el-button type="primary" plain round @click="navigateToSoftware">
              查看全部软件 <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="features-section">
      <div class="container">
        <div class="features-content">
          <div class="features-text">
            <h2>为什么选择团星网?</h2>
            <p>我们拥有10年以上的行业经验，服务过500+企业客户，提供专业可靠的IT解决方案</p>
            
            <div class="features-list">
              <div class="feature-item" v-for="feature in features" :key="feature.id">
                <el-icon color="#3b82f6"><Check /></el-icon>
                <span>{{ feature.text }}</span>
              </div>
            </div>
          </div>
          
          <div class="features-image">
            <el-image 
              src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
              fit="cover"
              class="feature-img"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- Testimonials Section -->
    <section class="testimonials-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">客户评价</h2>
          <p class="section-subtitle">听听我们的客户怎么说</p>
        </div>
        
        <el-carousel :interval="5000" height="300px" indicator-position="outside">
          <el-carousel-item v-for="testimonial in testimonials" :key="testimonial.id">
            <div class="testimonial-card">
              <div class="testimonial-avatar">
                <el-avatar :size="80" :src="testimonial.avatar" />
              </div>
              <div class="testimonial-content">
                <p class="testimonial-text">{{ testimonial.text }}</p>
                <p class="testimonial-author">{{ testimonial.name }}</p>
                <p class="testimonial-position">{{ testimonial.position }}, {{ testimonial.company }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
      <div class="container">
        <div class="cta-content">
          <h2>准备好开始您的项目了吗?</h2>
          <p>立即联系我们，获取免费咨询和报价</p>
          <el-button type="primary" size="large" round @click="navigateToContact">
            <el-icon><ChatDotRound /></el-icon>
            联系我们
          </el-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Download, Opportunity, ArrowRight, Check, 
  ChatDotRound, Monitor, DataBoard, Odometer, Lock 
} from '@element-plus/icons-vue'
import { getAllSoftware } from '@/api/software'

const router = useRouter()

// 数据状态
const loading = ref(true)
const popularSoftware = ref([])

// 服务数据
const services = ref([
  {
    id: 1,
    title: '设备维护',
    description: '专业的设备维护服务，确保您的IT设备稳定运行',
    icon: Monitor,
    color: '#3b82f6',
    path: '/services/device-maintenance'
  },
  {
    id: 2,
    title: '网站运营',
    description: '全方位的网站运营支持，提升您的网站影响力',
    icon: DataBoard,
    color: '#10b981',
    path: '/services/website-operation'
  },
  {
    id: 3,
    title: '网站搭建',
    description: '定制化的网站建设服务，满足您的个性化需求',
    icon: Odometer,
    color: '#f59e0b',
    path: '/services/website-building'
  },
  {
    id: 4,
    title: '安全服务',
    description: '全面的网络安全解决方案，保护您的数据安全',
    icon: Lock,
    color: '#ef4444',
    path: '/services/security'
  }
])

// 特点列表
const features = ref([
  { id: 1, text: '10年以上行业经验的专业团队' },
  { id: 2, text: '500+企业客户的成功案例' },
  { id: 3, text: '7×24小时全天候技术支持' },
  { id: 4, text: '定制化解决方案满足不同需求' },
  { id: 5, text: '透明合理的价格体系' },
  { id: 6, text: '快速响应的客户服务' }
])

// 客户评价
const testimonials = ref([
  {
    id: 1,
    name: '张先生',
    position: '技术总监',
    company: 'ABC科技有限公司',
    text: '团星网为我们提供的IT服务非常专业，解决了我们长期以来的系统稳定性问题，团队响应迅速，值得信赖。',
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
  },
  {
    id: 2,
    name: '李女士',
    position: '运营经理',
    company: 'XYZ电子商务',
    text: '他们的网站搭建服务帮助我们快速上线了新平台，用户体验得到显著提升，客户满意度提高了30%。',
    avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
  },
  {
    id: 3,
    name: '王总',
    position: 'CEO',
    company: '创新科技有限公司',
    text: '从设备维护到软件开发，团星网提供了一站式解决方案，大大降低了我们的IT管理成本。',
    avatar: 'https://randomuser.me/api/portraits/men/75.jpg'
  }
])

// 导航方法
const scrollToServices = () => {
  document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' })
}

const navigateToService = (path) => {
  router.push(path)
}

const navigateToSoftware = () => {
  router.push('/software')
}

const navigateToSoftwareDetail = (id) => {
  router.push(`/software/${id}`)
}

const navigateToContact = () => {
  router.push('/contact')
}

// 模拟获取热门软件
const fetchPopularSoftware = async () => {
  try {

    popularSoftware.value = await getAllSoftware()
  } catch (error) {
    console.error('获取软件列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 初始化加载数据
onMounted(() => {
  fetchPopularSoftware()
})
</script>

<style scoped lang="scss">
.home {
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero Section */
.hero-section {
  position: relative;
  background: url("@/assets/bge.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
  padding: 60px 0 120px;
  overflow: hidden;
}

.hero-content {
  display: flex;
  position: relative;
  align-items: center;
  z-index: 2;
  flex-direction: column;
  justify-content: center;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  
  .el-button {
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    
    .el-icon {
      margin-right: 0.5rem;
    }
  }
}

.hero-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  
  .hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
  }
}

.hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  
  svg {
    width: 100%;
    height: 100%;
    display: block;
  }
}

/* Section Common Styles */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto;
}

/* Services Section */
.services-section {
  padding: 80px 0;
  background-color: #f8fafc;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.service-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
}

.service-icon {
  margin-bottom: 1.5rem;
}

.service-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
}

.service-description {
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Software Section */
.software-section {
  padding: 80px 0;
  background-color: white;
}

.software-list {
  position: relative;
}

.software-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.view-all {
  text-align: center;
  margin-top: 2rem;
}

/* Features Section */
.features-section {
  padding: 80px 0;
  background-color: #f8fafc;
}

.features-content {
  display: flex;
  align-items: center;
  gap: 4rem;
  
  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.features-text {
  flex: 1;
  
  h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem;
  }
  
  p {
    font-size: 1.125rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 2rem;
  }
}

.features-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  
  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #1e293b;
  font-weight: 500;
  
  .el-icon {
    flex-shrink: 0;
  }
}

.features-image {
  flex: 1;
  
  .feature-img {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
  
  @media (max-width: 768px) {
    width: 100%;
    
    .feature-img {
      height: 300px;
    }
  }
}

/* Testimonials Section */
.testimonials-section {
  padding: 80px 0;
  background-color: white;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-avatar {
  margin-bottom: 1.5rem;
}

.testimonial-content {
  max-width: 600px;
}

.testimonial-text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #334155;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-author {
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.testimonial-position {
  color: #64748b;
  font-size: 0.875rem;
}

/* CTA Section */
.cta-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  text-align: center;
}

.cta-content {
  max-width: 800px;
  margin: 0 auto;
  
  h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }
  
  p {
    font-size: 1.125rem;
    opacity: 0.9;
    margin-bottom: 2rem;
  }
  
  .el-button {
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    
    .el-icon {
      margin-right: 0.5rem;
    }
  }
}
</style>